import React, { ReactElement, useState } from 'react';
import {
  TouchableOpacity,
  ViewStyle,
  TextStyle,
  TouchableOpacityProps,
  StyleSheet
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { BoxShadow as SVGShadow } from 'react-native-shadow';
import { flatten } from 'ramda';

import BoxShadow, { ShadowOptions } from '../BoxShadow';
import { APP_BLUE } from '../../constant/color';
import CustomText from '../Text';

const THROTTLE_TIME = 500;

interface Button extends TouchableOpacityProps {
  style?: ViewStyle | ViewStyle[]; // StyleProp<ViewStyle>;
  disableStyle?: ViewStyle | ViewStyle[];
  textStyle?: TextStyle | TextStyle[];
  disableTextStyle?: TextStyle | TextStyle[];
  linearStyle?: ViewStyle | ViewStyle[];
  text?: string;
  activity?: boolean;
  numberOfLines?: number;
  children?: (ReactElement | null)[] | ReactElement | null;
  onPress?: () => void;
  onLongPress?: () => void;
  needGradient?: boolean;
  gradientColor?: string[];
  throttleTime?: number;
  needShadow?: boolean;
  needSVGShadow?: boolean;
  shadowStyle?: any;
  shadowOptions?: ShadowOptions;
}

const Button = (props: Button): ReactElement | null => {
  const {
    style = {}, // 容器样式
    disableStyle,
    textStyle, // 文本样式
    disableTextStyle,
    linearStyle, // 渐变样式
    text, // 文本
    activity = true, // 是否可用
    numberOfLines = 10, // 按钮文案行数
    children,
    onPress,
    onLongPress,
    needGradient,
    gradientColor = [APP_BLUE, '#3DB8F9'],
    throttleTime = THROTTLE_TIME,
    needShadow = false,
    needSVGShadow = false,
    shadowStyle = {},
    shadowOptions = {}
  } = props;

  const [initTime, setInitTime] = useState();

  const click = (): void => {
    const clickTime = Date.now();
    if (initTime && clickTime - initTime < throttleTime) {
      return;
    }

    if (onPress) {
      setInitTime(clickTime);
      onPress();
    }
  };

  const content = (
    <TouchableOpacity
      activeOpacity={0.7}
      {...props}
      style={flatten([style, !activity ? disableStyle : {}])}
      disabled={!activity}
      accessible={!!activity}
      onPress={click}
      onLongPress={onLongPress}
    >
      {needGradient ? (
        <LinearGradient
          colors={gradientColor}
          style={[linearStyle || style]}
          start={{ x: 0.0, y: 1.0 }}
          end={{ x: 1.0, y: 0.0 }}
        >
          {children || ( // 如果有子组建，则显示子组建。否则显示普通文案
            <CustomText
              numberOfLines={numberOfLines}
              style={flatten([textStyle, !activity ? disableTextStyle : {}])}
            >
              {text}
            </CustomText>
          )}
        </LinearGradient>
      ) : (
        children || ( // 如果有子组建，则显示子组建。否则显示普通文案
          <CustomText
            numberOfLines={numberOfLines}
            style={flatten([textStyle, !activity ? disableTextStyle : {}])}
          >
            {text}
          </CustomText>
        )
      )}
    </TouchableOpacity>
  );

  if (needShadow) {
    return (
      <BoxShadow style={shadowStyle} options={shadowOptions}>
        {content}
      </BoxShadow>
    );
  }

  const resStyle = StyleSheet.flatten(shadowStyle);

  const shadowOpt = {
    width: resStyle.width || 0,
    height: resStyle.height || 0,
    color: shadowOptions.shadowColor,
    border: shadowOptions.shadowRadius,
    radius: shadowOptions.cornerRadius,
    opacity: shadowOptions.alpha,
    x: shadowOptions.shadowDx,
    y: shadowOptions.shadowDy,
    style: shadowStyle
  };

  if (needSVGShadow) {
    return <SVGShadow setting={shadowOpt}>{content}</SVGShadow>;
  }

  return content;
};

export default Button;
